<template>
    <div class="fluid container">
        <div class="form-group form-group-lg panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Sortable control</h3>
            </div>
            <div class="panel-body">
                <div class="checkbox">
                    <label><input type="checkbox" v-model="editable">Enable drag and drop</label>
                </div>
                <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
            </div>
        </div>

        <div class="col-md-3">
            <draggable class="list-group" tag="ul" v-bind="dragOptions" @start="isDragging=true"
                       v-for="(item) in sourceWidgets" :key="item"
                       @end="evt => widgetOnDragged(evt, item.code)"
            >

                <div>
                    {{item.name}}
                </div>

            </draggable>

            <div style="height: 500px; background-color: aliceblue; ">
                我是容器
                <widget v-for="(item,index) in widgets" :key="index" v-model="item.code">

                </widget>

            </div>
        </div>

    </div>
</template>

<script>
    import draggable from "vuedraggable";
    import widget from "../components/widget";

    const message = [
        "vue.draggable",
        "draggable",
        "component",
        "for",
        "vue.js 2.0",
        "based",
        "on",
        "Sortablejs"
    ];

    export default {
        name: "hello",
        components: {
            draggable,
            widget
        },
        data() {
            return {
                list: message.map((name, index) => {
                    return {name, order: index + 1, fixed: false};
                }),
                list2: [],
                editable: true,
                isDragging: false,
                delayedDragging: false,
                sourceWidgets: [{name: "按钮", code: "button"}, {name: "输入框", code: "input"}],//源组件
                widgets: []
            };
        },
        methods: {
            orderList() {
                this.list = this.list.sort((one, two) => {
                    return one.order - two.order;
                });
            },
            onMove() {

            },
            //拖动结束
            widgetOnDragged(evt,code) {
                console.log(evt);
                let item = {code: code};
                this.widgets.push(item);

            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 0,
                    group: "description",
                    disabled: !this.editable,
                    ghostClass: "ghost"
                };
            },
            listString() {
                return JSON.stringify(this.list, null, 2);
            },
            list2String() {
                return JSON.stringify(this.list2, null, 2);
            }
        },
        watch: {
            isDragging(newValue) {
                if (newValue) {
                    this.delayedDragging = true;
                    return;
                }
                this.$nextTick(() => {
                    this.delayedDragging = false;
                });
            }
        }
    };
</script>

<style>
    .flip-list-move {
        transition: transform 0.5s;
    }

    .no-move {
        transition: transform 0s;
    }

    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }

    .list-group {
        min-height: 20px;
    }

    .list-group-item {
        cursor: move;
    }

    .list-group-item i {
        cursor: pointer;
    }
</style>
